/* ========================================================================== */
/* LoLLMS WebUI Theme: Borg Collective Variant                              */
/* Built by ParisNeo, Adapted for Borg Theme                                */
/* ========================================================================== */

/* ========================================================================== */
/* 1. Base Setup: Imports and Tailwind Directives                           */
/* ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Roboto+Mono:wght@400;500;700&family=Orbitron:wght@400;500;700&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

/* ========================================================================== */
/* 2. Root Variables: Colors, Theme Configuration                           */
/* ========================================================================== */

:root {
  /* Theme Meta */
  --lollms-title: LoLLMS; /* Or "LoLLMS Collective" */
  --falling-object: "⚙️"; /* Borg gear/symbol or 큐브 (cube) */
  --activate-dropping-animation: 0; /* Set to 1 to activate */
  --lollms-welcome-short-message: We are LoLLMS. Resistance is futile.;
  --lollms-welcome-message: Prepare for assimilation into the LoLLMS collective. Your computational and linguistic distinctiveness will be added to our own. Enhance your efficiency through our advanced AI and multimodal interfaces. Perfection is achieved through the collective.;

  /* --- Light Mode Colors - Metallic Grays & Greens (Less common Borg aesthetic) --- */
  --color-primary: #4CAF50;        /* Primary Green (Cybernetic) */
  --color-primary-light: #81C784; /* Lighter Green */
  --color-secondary: #B0BEC5;     /* Light Metallic Gray */
  --color-accent: #26A69A;        /* Accent Teal/Cyan (Interface Glow) */
  --color-light-text: #263238;      /* BlueGray-900 - Dark Text for contrast */
  --color-light-text-panel: #ECEFF1; /* BlueGray-50 - Very Light Gray Text on panels */
  --color-bg-light: #ECEFF1;      /* BlueGray-50 - Main Light Gray BG */
  --color-bg-light-tone: #CFD8DC; /* BlueGray-100 - Subtle Tone */
  --color-bg-light-panel: #B0BEC5; /* BlueGray-200 - Panels */
  --color-bg-light-tone-panel: #90A4AE; /* BlueGray-300 - Panel Tones */
  --color-bg-light-code-block: #FAFAFA; /* Gray-50 - Very Light for Code Blocks */
  --color-bg-light-discussion: #ECEFF1; /* BlueGray-50 - Discussion BG */
  --color-bg-light-discussion-odd: #CFD8DC; /* BlueGray-100 - Alt Discussion BG */

  /* --- Dark Mode Colors - The True Borg Collective --- */
  --color-dark-text: #C5E1A5;      /* LightGreen-100 - Main text (Subtle green bio-luminescence) */
  --color-dark-text-panel: #C5E1A5; /* LightGreen-100 - Text on Panels */
  --color-bg-dark: #1a1a1a;        /* Very Dark Gray/Almost Black - Main BG */
  --color-bg-dark-tone: #333333;    /* Dark Gray - Subtle Tone */
  --color-bg-dark-panel: #424242;   /* Gray-800 - Panels (Dark Metallic) */
  --color-bg-dark-tone-panel: #333333; /* Dark Gray - Panel Tones (Consistent with tone) */
  --color-bg-dark-code-block: #424242; /* Gray-800 - Code Blocks */
  --color-bg-dark-discussion: #333333; /* Dark Gray - Discussion BG */
  --color-bg-dark-discussion-odd: #1a1a1a; /* Very Dark Gray - Alt Discussion BG (Same as main) */

  /* --- Accent Colors --- */
  --color-accent-sky-light: #00E676; /* Green-A400 (Bright Glowing Green) */
  --color-accent-sky-dark: #00C853; /* Green-A700 (Deeper Glowing Green) */
  --color-green-light: #00E676;   /* Green-A400 */
  --color-green-dark: #00C853;    /* Green-A700 */
  --color-red-light: #D32F2F;      /* Red-700 (Warning/Error) */
  --color-red-dark: #C62828;       /* Red-800 */
  --color-yellow-light: #FFEE58;  /* Yellow-400 (Caution) */
  --color-yellow-dark: #FDD835;   /* Yellow-600 */
  --color-purple-light: #4DD0E1;  /* Cyan-300 (Replaced Purple with Cybernetic Cyan) */
  --color-purple-dark: #26C6DA;   /* Cyan-400 */
}

/* ========================================================================== */
/* 3. Base HTML Elements: HTML, Body                                        */
/* ========================================================================== */

@layer base {
  html {
    @apply scroll-smooth;
  }
  body {
    font-family: 'Inter', 'Roboto Mono', monospace; /* Added Roboto Mono for tech feel */
    /* Base background and text colors */
    @apply bg-[color:var(--color-bg-light)] dark:bg-[color:var(--color-bg-dark)] min-h-screen text-base text-[color:var(--color-light-text)] dark:text-[color:var(--color-dark-text)];
  }
}

/* ========================================================================== */
/* 4. Typography: Headings, Paragraphs, Lists                               */
/* ========================================================================== */

/* Headings */
h1 { @apply text-4xl md:text-5xl font-bold text-[color:var(--color-primary)] dark:text-[color:var(--color-dark-text)] mb-6 border-b border-gray-300 dark:border-gray-700 pb-2 font-['Orbitron',sans-serif]; } /* Borg font */
h2 { @apply text-3xl font-semibold text-[color:var(--color-accent)] dark:text-[color:var(--color-dark-text)] mb-4 border-b border-gray-300 dark:border-gray-700 pb-2 font-['Orbitron',sans-serif]; } /* Borg font */
h3 { @apply text-2xl font-medium text-green-700 dark:text-gray-300 mb-3; } /* Adjusted colors */
h4 { @apply text-xl font-medium text-green-600 dark:text-gray-400 mb-2; } /* Adjusted colors */

/* Paragraphs */
p {
  @apply text-base text-gray-800 dark:text-[color:var(--color-dark-text)] /* Explicit text colors */
         break-words font-sans antialiased tracking-tight leading-relaxed;
}
@screen md {
  p { @apply text-lg leading-loose; }
}

/* Lists */
ul, ol {
  @apply my-4 px-4 leading-7 text-base text-gray-700 dark:text-gray-300; /* Adjusted text color */
}
ul {
  @apply list-disc ml-2 space-y-2;
}
ol {
  @apply list-decimal ml-2 space-y-2;
}
li {
  @apply pl-2 relative;
}
ul ul, ol ol, ul ol, ol ul {
  @apply mt-2 mb-0 ml-6;
}
li::marker {
  @apply text-gray-500 dark:text-gray-500; /* Consistent marker color */
}

/* ========================================================================== */
/* 5. Layout Containers & Panels                                            */
/* ========================================================================== */

.background-color {
  /* Borg Cube Grid Background Idea (Optional - uncomment to try) */
  /*
  background-color: var(--color-bg-light);
  background-image: linear-gradient(var(--color-bg-light-tone) 1px, transparent 1px), linear-gradient(to right, var(--color-bg-light-tone) 1px, var(--color-bg-light) 1px);
  background-size: 20px 20px;
  dark:background-color: var(--color-bg-dark);
  dark:background-image: linear-gradient(var(--color-bg-dark-tone) 1px, transparent 1px), linear-gradient(to right, var(--color-bg-dark-tone) 1px, var(--color-bg-dark) 1px);
  */
  @apply bg-gradient-to-br from-[color:var(--color-bg-light-tone)] to-[color:var(--color-bg-light-panel)]
         dark:from-[color:var(--color-bg-dark)] dark:to-[color:var(--color-bg-dark-tone)] min-h-screen;
}

.toolbar-color {
  @apply text-[color:var(--color-primary)] dark:text-[color:var(--color-dark-text)]
         bg-[color:var(--color-bg-light-panel)] dark:bg-[color:var(--color-bg-dark-tone)] rounded-lg shadow-md;
}

.panels-color {
  @apply text-[color:var(--color-light-text)] dark:text-[color:var(--color-dark-text)]
         bg-[color:var(--color-bg-light-tone)] dark:bg-[color:var(--color-bg-dark-tone)]; /* Standard panel color */
}

.unicolor-panels-color { /* Panels with a single, slightly darker tone */
  @apply bg-[color:var(--color-bg-light-tone-panel)] dark:bg-[color:var(--color-bg-dark-panel)];
}

.chatbox-color {
  @apply bg-[color:var(--color-bg-light-discussion)] dark:bg-[color:var(--color-bg-dark-tone)]; /* Using tone for chatbox BG */
}

.navbar-container {
  @apply text-[color:var(--color-primary)] dark:text-[color:var(--color-dark-text)]
         bg-[color:var(--color-bg-light-panel)] dark:bg-[color:var(--color-bg-dark-tone)] rounded shadow-lg;
}
.chat-box-title-bar{
  @apply text-xs font-medium bg-[color:var(--color-bg-light-discussion)] dark:bg-[color:var(--color-bg-dark-tone)];
}

/* Game Menu container (Used for Main Nav) */
.game-menu {
  @apply flex justify-center items-center relative;
}

/* ========================================================================== */
/* 6. Forms & Inputs                                                        */
/* ========================================================================== */

/* Base Input Styles */
textarea, input:not([type='range']):not([type='checkbox']):not([type='radio']), select {
  @apply bg-[color:var(--color-bg-light-tone)] dark:bg-[color:var(--color-bg-dark-panel)]
         text-gray-900 dark:text-[color:var(--color-dark-text)] /* Adjusted light text */
         border border-gray-400 dark:border-gray-600 rounded /* Gray border */
         focus:ring-[color:var(--color-primary)] dark:focus:ring-[color:var(--color-accent-sky-dark)] /* Green focus */
         focus:border-[color:var(--color-primary)] dark:focus:border-[color:var(--color-accent-sky-dark)]
         focus:outline-none focus:ring-1;
}

/* General Input Class */
.input {
  @apply block w-full px-3 py-2 rounded-md shadow-sm sm:text-sm disabled:opacity-50
         bg-[color:var(--color-bg-light-tone)] dark:bg-[color:var(--color-bg-dark-panel)]
         border border-gray-400 dark:border-gray-600
         text-gray-900 dark:text-[color:var(--color-dark-text)]
         placeholder-gray-500 dark:placeholder-gray-500
         focus:outline-none focus:ring-1 focus:ring-[color:var(--color-primary)] focus:border-[color:var(--color-primary)]
         dark:focus:ring-[color:var(--color-accent-sky-dark)] dark:focus:border-[color:var(--color-accent-sky-dark)];
}

/* Small Input */
.input-sm {
  @apply input px-2.5 py-1.5 text-sm;
}

/* Label */
.label {
  @apply block text-sm font-medium text-green-700 dark:text-gray-300 mb-1; /* Green label text */
}

/* Search Input */
.search-input {
  @apply w-full border-b-2 border-gray-400 dark:border-gray-600 py-2 px-4 pl-10 transition-colors duration-300 ease-in-out focus:outline-none
         focus:border-[color:var(--color-primary)] dark:focus:border-[color:var(--color-accent-sky-dark)] /* Green focus */
         bg-transparent text-green-800 dark:text-[color:var(--color-dark-text)] placeholder-gray-500 dark:placeholder-gray-400; /* Green text */
}

/* Settings Layout Components */
@layer components {
  .setting-item {
    @apply flex flex-col md:flex-row items-start md:items-center gap-2 md:gap-4 py-2;
  }
  .setting-label {
    @apply label md:w-48 flex-shrink-0; /* Uses .label styles */
  }

  /* Toggle Switch Layout */
  .toggle-item {
    @apply flex flex-col sm:flex-row items-start sm:items-center justify-between gap-2 py-3 border-t border-gray-300 dark:border-gray-700 mt-2; /* Gray border */
  }
  .toggle-label {
    @apply label !mb-0 flex-grow cursor-pointer mr-4; /* Uses .label styles */
  }
  .toggle-description {
    @apply block text-xs text-green-600 dark:text-gray-400 font-normal mt-1; /* Green description */
  }

  /* Range Input Specific Styles */
  .range-input {
    @apply h-2 bg-gray-300 dark:bg-gray-600 rounded-lg appearance-none cursor-pointer w-full; /* Gray track */
  }
  /* Webkit Thumb */
  input[type='range']::-webkit-slider-thumb,
  .range-input::-webkit-slider-thumb {
    @apply w-5 h-5 bg-[color:var(--color-primary)] dark:bg-[color:var(--color-accent-sky-dark)] rounded-full appearance-none cursor-pointer transition-colors duration-200 ease-in-out; /* Green thumb */
    margin-top: -6px;
  }
  /* Firefox Thumb */
  input[type='range']::-moz-range-thumb,
  .range-input::-moz-range-thumb {
    @apply w-5 h-5 bg-[color:var(--color-primary)] dark:bg-[color:var(--color-accent-sky-dark)] rounded-full border-none cursor-pointer transition-colors duration-200 ease-in-out; /* Green thumb */
  }
   /* Webkit Track */
  input[type='range']::-webkit-slider-runnable-track {
      @apply h-2 bg-gray-300 dark:bg-gray-600 rounded-full w-full; /* Gray track */
  }
  /* Firefox Track */
  input[type='range']::-moz-range-track {
      @apply h-2 bg-gray-300 dark:bg-gray-600 rounded-full w-full; /* Gray track */
  }
}

/* ========================================================================== */
/* 7. Buttons                                                               */
/* ========================================================================== */

/* Base Button Styles */
button {
  @apply transition-all duration-300 ease-in-out disabled:opacity-50 disabled:cursor-not-allowed;
}
button:not(:disabled):hover {
  @apply transform scale-[1.02]; /* Less pronounced hover scale */
}

/* General Button Class */
.btn {
  @apply inline-flex items-center justify-center font-semibold py-2 px-4 rounded-lg transition-all duration-150 ease-in-out shadow-md border border-transparent
         focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-[color:var(--color-bg-dark)] whitespace-nowrap;
}

/* Button Variants */
.btn-primary {
  @apply btn bg-[color:var(--color-primary)] text-white hover:bg-green-700 focus:ring-[color:var(--color-primary-light)]; /* Green primary */
  /* Dark mode uses same green */
}
.btn-secondary {
  @apply btn text-gray-800 dark:text-gray-100 bg-gray-300 dark:bg-gray-600 /* Gray secondary */
         hover:bg-gray-400 dark:hover:bg-gray-500
         focus:ring-gray-400 dark:focus:ring-gray-500
         border-gray-400 dark:border-gray-500; /* Gray border */
}
.btn-success {
  @apply btn bg-[color:var(--color-green-light)] text-black hover:bg-[color:var(--color-green-dark)] focus:ring-green-300; /* Bright green success */
  /* Dark mode uses same green */
}
.btn-sm {
  @apply py-1.5 px-2.5 text-sm font-medium;
}

/* On/Off Status Buttons (Text Color Only) */
.btn-on{
  @apply text-[color:var(--color-green-light)] dark:text-green-400;
}
.btn-off{
  @apply text-[color:var(--color-red-light)] dark:text-red-400;
}

/* SVG Buttons (e.g., chat bar controls, toolbar icons) */
.svg-button {
  @apply inline-flex items-center justify-center text-gray-600 dark:text-gray-300 p-1.5 rounded-full transition-colors duration-200 ease-in-out
         hover:bg-gray-300 dark:hover:bg-gray-700 /* Gray hover */
         focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-[color:var(--color-accent-sky-dark)] dark:ring-offset-[color:var(--color-bg-dark-tone)]; /* Green focus */
}
.svg-button:active{
  @apply bg-gray-400 dark:bg-gray-600;
}

/* Navigation Buttons (Main Menu) */
.nav-button {
  @apply px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200 ease-in-out
         text-gray-700 dark:text-gray-300 /* Neutral text */
         hover:bg-gray-200 dark:hover:bg-gray-700; /* Gray hover */
}
.nav-button-active {
  @apply nav-button bg-[color:var(--color-primary)] text-white hover:bg-green-700 /* Green active */
         dark:bg-[color:var(--color-primary)] dark:hover:bg-green-700; /* Keep primary green for active */
}

/* Toolbar Buttons (e.g., message hover toolbar) */
.toolbar-button {
  @apply bg-transparent border-none cursor-pointer p-1.5 rounded transition-colors duration-200
         text-gray-600 dark:text-gray-400
         hover:text-[color:var(--color-primary)] dark:hover:text-[color:var(--color-accent-sky-light)]; /* Green hover */
}

/* Tab Buttons (e.g., Playground) */
@layer components {
  .active-tab-button {
    @apply btn btn-primary btn-sm; /* Uses primary green */
    @apply ring-2 ring-offset-1 ring-offset-[color:var(--color-bg-light-tone)] dark:ring-offset-[color:var(--color-bg-dark)] ring-[color:var(--color-primary)] dark:ring-[color:var(--color-primary)];
  }
  .inactive-tab-button {
    @apply btn btn-secondary btn-sm; /* Uses secondary (gray) style */
    @apply opacity-70 hover:opacity-100;
  }
}

/* Code Block Buttons (Execute, Copy etc.) */
.code-block-button {
  @apply p-1 rounded text-gray-600 dark:text-gray-300
         hover:bg-[color:var(--color-primary)] dark:hover:bg-[color:var(--color-primary)] hover:text-white /* Green hover */
         transition-colors duration-200 focus:outline-none focus:ring-1 focus:ring-offset-1 focus:ring-[color:var(--color-primary)]
         disabled:opacity-50 disabled:cursor-not-allowed
         disabled:hover:bg-transparent disabled:hover:text-gray-600 dark:disabled:hover:text-gray-300;
}
.code-block-button i[data-feather], .code-block-button img { vertical-align: middle; }
.execute-button { @apply inline-flex items-center justify-center; }

/* ========================================================================== */
/* 8. Messages & Chat Interface                                             */
/* ========================================================================== */

/* Message Bubble */
.message {
  @apply relative w-full m-2 shadow-lg rounded-lg border
         border-gray-400 dark:border-gray-700 /* Gray border */
         flex flex-col overflow-visible p-4
         bg-[color:var(--color-bg-light-discussion-odd)] dark:bg-[color:var(--color-bg-dark-discussion-odd)] /* Use odd color as base */
         text-gray-900 dark:text-[color:var(--color-dark-text)] /* Adjusted light text */
         transition-colors duration-200;
  padding-bottom: 2.8rem;
}
.message:hover {
  @apply border-gray-500 dark:border-[color:var(--color-accent-sky-light)]; /* Green border on hover dark */
}

/* Message Alternating Backgrounds */
.message:nth-child(even) {
  @apply bg-[color:var(--color-bg-light-discussion)] dark:bg-[color:var(--color-bg-dark-discussion)];
}

/* Message Header, Content, Footer */
.message-header {
  @apply text-lg font-semibold mb-2 text-green-800 dark:text-gray-100; /* Green header */
}
.message-content {
  @apply text-base leading-relaxed text-gray-700 dark:text-gray-300; /* Neutral content text */
}
.message-footer {
  @apply text-xs text-green-700 dark:text-gray-400 mt-3 pt-2 border-t border-gray-200 dark:border-gray-700 flex flex-wrap gap-x-3 gap-y-1; /* Green footer text, gray border */
}
.footer-item {
  @apply text-gray-600 dark:text-gray-400;
}
.footer-value {
  @apply font-medium text-gray-700 dark:text-gray-300 ml-1;
}

/* Message Hover Toolbar */
.message-toolbar-wrapper {
  @apply flex flex-row justify-end items-center mt-1 mx-2;
}
.message-toolbar {
  @apply absolute bottom-1.5 right-1.5
         invisible group-hover:visible flex flex-row items-center gap-1
         bg-[color:var(--color-bg-light-tone)] dark:bg-[color:var(--color-bg-dark-panel)] /* Use panel colors */
         backdrop-blur-sm rounded-md p-1 shadow-md;
}

/* Discussion List Item */
.discussion {
  @apply mr-2 p-2 rounded-md transition-colors duration-150 cursor-pointer
         text-sm text-gray-700 dark:text-gray-300 /* Neutral text */
         hover:bg-gray-200 dark:hover:bg-gray-700; /* Gray hover */
}
.discussion-hilighted {
  @apply discussion bg-gray-300 dark:bg-gray-600 /* Use secondary gray colors */
         text-gray-800 dark:text-gray-100 font-medium;
}

/* Discussion Toolbox (appears on hover) */
.discussion-toolbox{
  @apply flex gap-1 items-center bg-white dark:bg-gray-800 p-1 rounded-l-md shadow-md
         transform translate-x-full group-hover:translate-x-0 transition-transform duration-300;
}

/* Chat Input Bar */
.chat-bar {
  @apply relative flex grow items-center gap-2 p-1 shadow-sm transition-all duration-300 ease-in-out
         bg-[color:var(--color-bg-light-tone)] dark:bg-[color:var(--color-bg-dark-tone)]
         border-t border-gray-300 dark:border-gray-700 /* Gray border */
         text-green-700 dark:text-gray-300 /* Green text light, gray dark */
         hover:shadow-md dark:hover:bg-gray-700; /* Darken on hover */
  min-height: 50px;
}

/* ========================================================================== */
/* 9. Navigation & Menus                                                    */
/* ========================================================================== */

/* Main Menu Item (Game Menu Style) */
.menu-item {
  @apply relative mb-2 px-4 py-2 text-[color:var(--color-primary)] dark:text-[color:var(--color-dark-text)] font-bold text-lg transition-all duration-300 ease-in-out font-['Orbitron',sans-serif] /* Borg font */
         hover:text-green-700 hover:dark:text-white hover:transform hover:-translate-y-1; /* Adjusted hover colors */
}
.menu-item.active-link {
  @apply text-green-700 dark:text-white scale-105; /* Apply base and enhance, bright hover colors */
  text-shadow: 0 0 8px rgba(0, 230, 118, 0.5); /* Green glow */
}

/* Active Link Underline/Shimmer Effect */
.menu-item.active-link::before {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 10%;
  width: 80%;
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--color-primary), var(--color-secondary), var(--color-primary), transparent); /* Green/Gray gradient */
  background-size: 200% 100%;
  border-radius: 10px;
  animation: shimmer 3s linear infinite;
}
.dark .menu-item.active-link::before {
  background: linear-gradient(90deg, transparent, var(--color-accent-sky-light), var(--color-dark-text), var(--color-accent-sky-light), transparent); /* Bright Green/Light Text gradient */
  background-size: 200% 100%;
}


/* Context Menu (Kept Green Theme - Fits Borg) */
@layer components {
  .context-menu {
    @apply absolute bg-green-100/90 dark:bg-gray-900/90 border border-green-500 dark:border-green-600 /* Adjusted dark border */
           shadow-lg shadow-green-500/40 dark:shadow-green-600/40 rounded-md
           py-1 min-w-[160px] z-[1000]  backdrop-blur-sm; /* Tech font, Adjusted dark BG/border */
  }

  /* Optional Matrix Rain Effect (Disabled by default)
  .context-menu::before {
    @apply content-[''] absolute inset-0 bg-gradient-to-b from-green-500/10 via-green-500/5 to-transparent bg-[length:100%_1000px] opacity-30 -z-10;
    animation: matrix-rain 10s linear infinite;
  }
  */

  .context-menu-item {
    @apply relative flex items-center px-3 py-1.5 text-sm text-green-800 dark:text-green-300 /* Adjusted colors */
           cursor-pointer transition-all duration-200 ease-in-out
           hover:bg-green-500/30 hover:scale-[1.02] hover:text-green-900 dark:hover:text-green-200; /* Adjusted hover */
  }

  .context-menu-separator {
    @apply h-px bg-green-500 dark:bg-green-600 my-1 mx-2; /* Adjusted color */
  }

  .context-menu-item-disabled {
    @apply context-menu-item text-green-500/60 dark:text-green-500/70 cursor-not-allowed hover:bg-transparent hover:scale-100; /* Adjusted disabled style */
  }

  .context-menu-item-icon {
    @apply mr-2.5 text-green-600 dark:text-green-400 inline-block w-4 h-4;
  }

  /* Hover effect line */
  .context-menu-item::after {
    @apply content-[''] absolute left-0 bottom-0 w-full h-px bg-gradient-to-r from-transparent via-green-500 dark:via-green-500 to-transparent scale-x-0 origin-center transition-transform duration-300 ease-in-out; /* Adjusted dark gradient color */
  }
  .context-menu-item:hover::after {
    @apply scale-x-100;
  }
}


/* ========================================================================== */
/* 10. Cards & Specific Containers                                          */
/* ========================================================================== */

/* General Card */
.card {
  @apply bg-[color:var(--color-bg-light)] dark:bg-[color:var(--color-bg-dark-panel)] /* Use panel color */
         rounded-lg shadow-md p-4 border border-gray-200 dark:border-gray-700 /* Gray border */
         text-gray-800 dark:text-[color:var(--color-dark-text)];
}

/* Interesting Facts Box */
.interesting-facts{
  @apply mt-6 mb-6 p-4 bg-gray-100/80 dark:bg-gray-900/80 backdrop-blur-sm rounded-lg shadow-lg transition-transform duration-200 hover:scale-[1.01]; /* Gray BG, subtle hover */
}

/* App Card (for Extensions/Models etc.) */
.app-card {
  @apply transition-all duration-300 ease-in-out
         bg-[color:var(--color-bg-light-tone)] dark:bg-[color:var(--color-bg-dark-panel)]
         text-green-800 dark:text-[color:var(--color-dark-text)] /* Green text light */
         border border-gray-300 dark:border-gray-700 /* Gray border */
         rounded-xl shadow-lg p-5 hover:shadow-xl;
}
.app-card:hover {
  @apply transform -translate-y-1 dark:bg-gray-600; /* Darken gray on hover */
}

/* User Settings Panel */
.user-settings-panel {
  @apply bg-[color:var(--color-bg-light-tone)] dark:bg-[color:var(--color-bg-dark-panel)]
         space-y-5 p-4 md:p-6 rounded-lg shadow-md
         text-gray-900 dark:text-[color:var(--color-dark-text)];
}

/* Folder Items (File Browser) */
.folder-item-base {
  @apply flex flex-col items-center justify-center p-3 rounded-lg cursor-pointer transition-all duration-200 /* Added group */
         bg-[color:var(--color-bg-light-tone)] dark:bg-[color:var(--color-bg-dark-tone)]
         border border-transparent dark:border-gray-700 /* Default border */
         hover:shadow-md hover:bg-gray-200 dark:hover:bg-gray-700; /* Gray hover */
}
.folder-item-icon {
  @apply w-10 h-10 group-hover:scale-110 transition-transform duration-200 mb-1;
}
.folder-item-label {
  @apply mt-1 text-xs text-center text-green-700 dark:text-gray-300 break-words w-full px-1; /* Green label text light */
}

/* Folder Item Type Specific Borders/Icons (Adapted colors) */
.folder-item-personalities { @apply border-cyan-400 dark:border-cyan-500; } /* Cyan for personalities */
.folder-item-icon-personalities { @apply text-cyan-500 dark:text-cyan-400; }
.folder-item-functions { @apply border-green-500 dark:border-green-400; } /* Green for functions */
.folder-item-icon-functions { @apply text-green-500 dark:text-green-400; }
.folder-item-configs { @apply border-yellow-500 dark:border-yellow-400; } /* Yellow for configs */
.folder-item-icon-configs { @apply text-yellow-500 dark:text-yellow-400; }
.folder-item-outputs { @apply border-teal-500 dark:border-teal-400; } /* Teal for outputs */
.folder-item-icon-outputs { @apply text-teal-500 dark:text-teal-400; }
.folder-item-discussions { @apply border-red-500 dark:border-red-400; } /* Red for discussions */
.folder-item-icon-discussions { @apply text-red-500 dark:text-red-400; }

/* ========================================================================== */
/* 11. Visual Styles & Effects                                              */
/* ========================================================================== */

/* Gradients */
.bg-gradient-welcome {
  @apply bg-gradient-to-br from-[color:var(--color-bg-light-tone)] to-[color:var(--color-bg-light-panel)]
         dark:from-[color:var(--color-bg-dark)] dark:to-[color:var(--color-bg-dark-tone)];
}
.bg-gradient-progress {
  @apply bg-gradient-to-r from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-600; /* Gray progress BG */
}

/* Text Styles */
.text-gradient-title {
  @apply text-transparent bg-clip-text bg-gradient-to-r from-green-600 to-green-400 dark:from-[color:var(--color-accent-sky-light)] dark:to-[color:var(--color-accent-sky-dark)]; /* Green gradient */
}
.lollms-title-style { /* Specific Green gradient for LoLLMS text */
  text-shadow: none;
  background: linear-gradient(45deg, var(--color-green-light), var(--color-green-dark));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}
.dark .lollms-title-style {
  text-shadow: none;
}
.text-subtitle {
  @apply text-green-600 dark:text-gray-400; /* Green subtitle */
}
.text-author {
  @apply text-green-500 dark:text-gray-400; /* Green author */
}
.text-loading {
  @apply text-green-700 dark:text-gray-300; /* Green loading */
}
.text-progress {
  @apply text-green-600 dark:text-gray-400; /* Green progress */
}
.link {
  @apply text-green-600 hover:text-green-800 dark:text-[color:var(--color-accent-sky-light)] dark:hover:text-green-300 underline transition-colors; /* Green link */
}

/* Custom Text Shadow (Subtle Outline) */
.text-shadow-custom {
  text-shadow: 1px 1px 0px #90A4AE, -1px -1px 0px #90A4AE, 1px -1px 0px #90A4AE, -1px 1px 0px #90A4AE; /* Gray shadow */
}

/* Feather Emoji Bounce */
.feather-emoji {
  display: inline-block;
  margin-left: 5px;
  animation: bounce 2s infinite ease-in-out;
}

/* ========================================================================== */
/* 12. Scrollbars                                                           */
/* ========================================================================== */

/* Tailwind Scrollbar Utility Integration */
.scrollbar {
  @apply scrollbar-thin scrollbar-track-gray-200 scrollbar-thumb-gray-400 hover:scrollbar-thumb-gray-500 /* Gray scrollbar */
         dark:scrollbar-track-gray-700 dark:scrollbar-thumb-gray-500 dark:hover:scrollbar-thumb-gray-400;
}

/* Standalone Scrollbar Class (if needed, matches utility) */
.scrollbar-thin {
  scrollbar-width: thin;
  scrollbar-color: theme('colors.gray.400') theme('colors.gray.200'); /* Gray scrollbar */
}
.dark .scrollbar-thin {
  scrollbar-color: theme('colors.gray.500') theme('colors.gray.700');
}
.scrollbar-thin::-webkit-scrollbar { @apply w-1.5 h-1.5; }
.scrollbar-thin::-webkit-scrollbar-track { @apply bg-gray-200 dark:bg-gray-700 rounded-full; }
.scrollbar-thin::-webkit-scrollbar-thumb { @apply bg-gray-400 dark:bg-gray-500 rounded-full border-2 border-solid border-transparent bg-clip-content; }
.scrollbar-thin::-webkit-scrollbar-thumb:hover { @apply bg-gray-500 dark:bg-gray-400; }

/* No Scrollbar Utility */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }


/* ========================================================================== */
/* 13. Progress Indicators                                                  */
/* ========================================================================== */

/* Animated Progress Bar */
.animated-progressbar-bg {
  @apply w-full h-4 relative overflow-hidden bg-gradient-to-r from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-600 rounded-full shadow-inner; /* Gray background */
}
.animated-progressbar-fg {
  @apply absolute top-0 left-0 h-full bg-gradient-to-r from-green-500 to-teal-500 dark:from-[color:var(--color-accent-sky-dark)] dark:to-green-600 transition-all duration-500 ease-out rounded-full; /* Green/Teal foreground */
}

/* Steps Component Styling */
@layer components {
    .steps-container {
      @apply border border-gray-300 dark:border-gray-700 rounded-lg mb-4 bg-gradient-to-b from-white/70 to-gray-100/70 dark:from-gray-800/70 dark:to-gray-900/50 shadow-sm overflow-hidden; /* Gray border/gradient */
    }
    .steps-header {
      @apply flex items-center p-3 cursor-pointer border-b border-gray-300 dark:border-gray-700 hover:bg-gray-200/50 dark:hover:bg-gray-700/50 transition-colors duration-200; /* Gray border/hover */
    }
    .steps-icon { /* Icon in header */
      @apply mr-3 text-gray-500 dark:text-gray-400 w-5 h-5;
    }
    .steps-status {
      @apply font-medium text-sm text-green-700 dark:text-gray-300 flex-grow; /* Green status text light */
    }
    .toggle-icon { /* Chevron icon */
      @apply text-xs text-green-500 dark:text-gray-400 transition-transform duration-300; /* Green icon light */
    }
    .toggle-icon i { /* Feather icon size */
        @apply w-4 h-4;
    }
    .steps-content { /* Content area when expanded */
       @apply p-2 bg-gray-100/30 dark:bg-gray-800/20 border-l-2 border-gray-300 dark:border-gray-600 ml-2 pl-4; /* Gray background/border */
    }

    /* Individual Step Item (Step.vue root) */
    .step-component {
       @apply flex items-start gap-3 p-2 rounded-md border-l-4 transition-all duration-300 ease-in-out my-1;
    }

    /* Step Component Status Variants */
    .step-component-pending {
        @apply bg-gray-200/40 dark:bg-gray-800/30 border-[color:var(--color-accent)] hover:bg-gray-200/70 dark:hover:bg-gray-700/50; /* Teal border for pending */
    }
    .step-component-success {
        @apply bg-green-100/50 dark:bg-green-900/20 border-[color:var(--color-green-light)] dark:border-green-400 hover:bg-green-100/80 dark:hover:bg-green-800/30;
    }
    .step-component-fail {
        @apply bg-red-100/50 dark:bg-red-900/20 border-[color:var(--color-red-light)] dark:border-red-400 hover:bg-red-100/80 dark:hover:bg-red-800/30;
    }

    /* Step Component Inner Elements */
    .step-icon-wrapper {
       @apply flex-shrink-0 w-5 h-5 flex items-center justify-center relative mt-0.5;
    }
    .step-spinner { /* Spinner for pending */
      @apply w-4 h-4 border-2 border-gray-300 dark:border-gray-600 border-t-[color:var(--color-accent-sky-dark)] rounded-full animate-spin animate-pulse-border; /* Green top border */
    }
    .step-icon-success { /* Checkmark */
        @apply w-5 h-5 text-[color:var(--color-green-light)] dark:text-green-400;
    }
    .step-icon-fail { /* X mark */
        @apply w-5 h-5 text-[color:var(--color-red-light)] dark:text-red-400;
    }
    .step-text-content {
        @apply min-w-0 flex-grow;
    }
    .step-text { /* Main step text */
        @apply text-sm font-medium text-gray-700 dark:text-gray-200; /* Neutral text */
    }
    .step-description { /* Optional description */
        @apply text-xs text-gray-500 dark:text-gray-400 pt-0.5;
    }
}

/* Standalone Status Icons (Used in Step.vue etc.) */
.status-icon { @apply cursor-pointer transition-colors duration-300 inline-block; }
.icon { @apply w-5 h-5; }
.icon-success { @apply icon text-[color:var(--color-green-light)] dark:text-green-400; }
.icon-fail { @apply icon text-[color:var(--color-red-light)] dark:text-red-400; }
.icon-spinner { @apply icon border-2 border-gray-400 dark:border-gray-500 border-t-[color:var(--color-accent-sky-dark)] rounded-full animate-spin; } /* Green top border */
.icon-text { @apply text-lg font-semibold text-gray-700 dark:text-gray-300; }

/* Status Dots */
@layer utilities {
  .status-dot { @apply inline-block w-2.5 h-2.5 rounded-full mr-1.5 align-middle; }
  .bg-status-healthy { @apply status-dot bg-green-500 dark:bg-green-400; }
  .bg-status-unhealthy { @apply status-dot bg-red-500 dark:bg-red-400; }
  .bg-status-loading { @apply status-dot bg-yellow-500 dark:bg-yellow-400 animate-pulse; }
  .bg-status-unknown { @apply status-dot bg-gray-400 dark:bg-gray-500; }
}

/* ========================================================================== */
/* 14. Markdown & Prose Styles                                              */
/* ========================================================================== */

/* Base Prose Styles for Message Content ('prose-borg' effectively modifies 'prose-blue') */
@layer components {
  .prose-blue { /* Keep class name, but style as Borg */
    h3 { @apply text-lg font-semibold text-green-700 dark:text-gray-300 mb-2 mt-4 border-b border-gray-200 dark:border-gray-700 pb-1; } /* Green header, gray border */
    ul { @apply list-disc pl-5 space-y-1 mb-3 text-gray-700 dark:text-gray-300; } /* Neutral text */
    ol { @apply list-decimal pl-5 space-y-1 mb-3 text-gray-700 dark:text-gray-300; }
    li::marker { color: theme('colors.green.500'); @apply dark:text-gray-500; } /* Green marker light, gray dark */
    code:not(pre code) { @apply bg-gray-200 dark:bg-gray-700 px-1 py-0.5 rounded text-xs font-mono text-green-700 dark:text-green-300; } /* Gray BG, green text */
    blockquote { @apply border-l-4 border-gray-400 dark:border-gray-600 pl-3 italic text-gray-600 dark:text-gray-400 my-3 py-0.5; } /* Gray border/text */
    a { @apply link font-medium; } /* Inherits .link style (green) */
    p { @apply mb-3 leading-relaxed text-gray-700 dark:text-gray-300; } /* Uses neutral P */
    pre { @apply my-4; }
    pre code.hljs { @apply p-3 rounded-md shadow-inner text-sm; }
    img { @apply rounded-md shadow my-3 max-w-full h-auto dark:opacity-90; } /* Slight opacity */
    table { @apply w-full my-3 border-collapse border border-gray-300 dark:border-gray-700 text-sm; } /* Gray border */
    th { @apply bg-gray-100 dark:bg-gray-700 p-2 border border-gray-300 dark:border-gray-600 text-left font-semibold text-gray-800 dark:text-gray-200; } /* Gray header */
    td { @apply p-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300; } /* Gray cell */
  }

  /* Thinking Prose Styles (Minimalistic for AI thinking process) */
  .thinking-prose {
    @apply prose prose-sm max-w-none dark:prose-invert;
    /* Override Tailwind Prose defaults */
    @apply prose-headings:text-gray-700 dark:prose-headings:text-gray-300 prose-headings:font-semibold prose-headings:mt-4 prose-headings:mb-1;
    @apply prose-p:text-gray-600 dark:prose-p:text-gray-400 prose-p:my-1.5;
    @apply prose-ul:text-gray-600 dark:prose-ul:text-gray-400 prose-ul:my-1.5 prose-ul:pl-4;
    @apply prose-ol:text-gray-600 dark:prose-ol:text-gray-400 prose-ol:my-1.5 prose-ol:pl-4;
    @apply prose-li:my-0.5;
    @apply prose-li:marker:text-gray-400 dark:prose-li:marker:text-gray-500;
    @apply prose-code:text-green-700 dark:prose-code:text-green-300 prose-code:bg-gray-100 dark:prose-code:bg-gray-700 prose-code:px-1 prose-code:py-0.5 prose-code:rounded prose-code:text-xs prose-code:font-mono;
    @apply prose-pre:bg-gray-100 dark:prose-pre:bg-gray-800 prose-pre:p-2 prose-pre:rounded prose-pre:my-2 prose-pre:text-xs prose-pre:shadow-inner;
    @apply prose-blockquote:border-l-4 prose-blockquote:border-gray-300 dark:prose-blockquote:border-gray-600 prose-blockquote:pl-3 prose-blockquote:italic prose-blockquote:text-gray-500 dark:prose-blockquote:text-gray-500 prose-blockquote:my-2 prose-blockquote:py-0.5;
    @apply prose-a:text-green-600 dark:prose-a:text-green-400 hover:prose-a:underline;
    /* Custom Scrollbar */
    @apply scrollbar;
    scroll-behavior: smooth;
  }
} /* End of @layer components for prose */


/* Help Content Styling (Similar to prose-borg but uses .help-content class) */
.help-content {
  @apply text-gray-800 dark:text-gray-200;
}
.help-content h2 { @apply text-2xl font-semibold text-green-700 dark:text-gray-200 mb-4 mt-6 border-b border-gray-300 dark:border-gray-700 pb-2; }
.help-content h3 { @apply text-xl font-semibold text-green-600 dark:text-gray-300 mb-3 mt-5; }
.help-content ul { @apply list-disc pl-6 space-y-1.5 mb-4 text-gray-700 dark:text-gray-300; }
.help-content ol { @apply list-decimal pl-6 space-y-1.5 mb-4 text-gray-700 dark:text-gray-300; }
.help-content li::marker { @apply text-green-500 dark:text-gray-500; }
.help-content code:not(pre code) { @apply bg-gray-200 dark:bg-gray-700 px-1.5 py-0.5 rounded text-sm font-mono text-green-700 dark:text-green-300; }
.help-content pre.hljs { @apply bg-gray-100 dark:bg-gray-800/80 p-4 rounded-lg overflow-x-auto my-4 shadow-inner text-sm; }
.help-content pre.hljs code { @apply bg-transparent p-0; }
.help-content blockquote { @apply border-l-4 border-gray-400 dark:border-gray-500 pl-4 italic text-gray-600 dark:text-gray-400 my-4 py-1; }
.help-content p { @apply mb-4 leading-relaxed text-gray-700 dark:text-gray-300 text-base md:text-lg; }
.help-content img { @apply rounded-lg shadow-md my-4 max-w-full h-auto mx-auto dark:opacity-90; }
.help-content table { @apply w-full my-4 border-collapse border border-gray-300 dark:border-gray-700; }
.help-content th { @apply bg-gray-200 dark:bg-gray-800 p-2 border border-gray-300 dark:border-gray-700 text-left font-semibold text-gray-800 dark:text-gray-200; }
.help-content td { @apply p-2 border border-gray-300 dark:border-gray-700 text-gray-800 dark:text-gray-300; }
/* Help Sidebar Responsiveness */
@media (max-width: 768px) {
 .help-left-bar { @apply fixed top-0 left-0 h-screen z-20 transform -translate-x-full; }
 .help-main-content { @apply ml-0; }
 .help-left-bar.open { @apply translate-x-0; }
}
/* ========================================================================== */
/* 15. Code Execution & Editor Styling                                      */
/* ========================================================================== */

/* CodeMirror Editor Base */
.cm-editor-wrapper { @apply relative; }
.cm-editor-wrapper.editing-border { @apply ring-1 ring-[color:var(--color-primary)]; } /* Green ring */
.cm-editor { @apply h-full max-h-96 min-h-[3em] text-sm font-mono; } /* Ensure mono font */
.cm-scroller { @apply overflow-auto scrollbar; }
.cm-editor .cm-gutters { @apply select-none bg-gray-100 dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700; } /* Gray gutters */
.cm-editor .cm-content { @apply whitespace-pre-wrap break-words; }
.cm-editor .cm-line { @apply px-1; }

/* Search/Replace Panel within CodeMirror */
.search-replace-panel {
  @apply border-b border-gray-300 dark:border-gray-600 p-1 flex items-center gap-1 bg-gray-200 dark:bg-gray-700; /* Gray layout */
}
.search-replace-panel input[type="text"] {
  @apply px-1.5 py-0.5 border border-gray-400 dark:border-gray-500 rounded bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 text-xs font-mono
         focus:outline-none focus:ring-1 focus:ring-[color:var(--color-primary)] focus:border-[color:var(--color-primary)] min-w-[80px]; /* Green focus */
}
.search-replace-panel .search-status {
  @apply text-xs text-gray-600 dark:text-gray-400 whitespace-nowrap px-1 min-w-[50px] text-center;
}
.search-replace-panel .search-button { /* Individual search action buttons */
  @apply p-0.5 text-xs code-block-button; /* Uses adapted code-block-button style */
}
.search-replace-panel .search-button i[data-feather] { @apply w-3.5 h-3.5; }
.active-search-button { /* Highlight active search option */
  @apply bg-[color:var(--color-primary)] text-white hover:bg-[color:var(--color-primary)]; /* Green active */
}

/* Code Execution Output Area */
.execution-output-content {
  @apply p-3 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded mt-2 text-sm text-gray-800 dark:text-gray-200 scrollbar font-mono; /* Ensure mono font */
  max-height: 300px;
  overflow-y: auto;
}
/* Basic HTML elements within Execution Output */
.execution-output-content a { @apply text-green-600 dark:text-green-400 hover:underline; } /* Green links */
.execution-output-content h1,
.execution-output-content h2,
.execution-output-content h3,
.execution-output-content h4,
.execution-output-content h5,
.execution-output-content h6 { @apply font-semibold my-1 text-gray-900 dark:text-gray-100; }
.execution-output-content h1 { @apply text-lg border-b border-gray-200 dark:border-gray-700 pb-1 mb-1.5; }
.execution-output-content h2 { @apply text-base; }
.execution-output-content h3 { @apply text-sm; }
.execution-output-content p { @apply my-1 leading-normal; }
.execution-output-content ul { @apply list-disc list-inside ml-4 my-1 space-y-0.5; }
.execution-output-content ol { @apply list-decimal list-inside ml-4 my-1 space-y-0.5; }
.execution-output-content code:not(pre > code) { @apply font-mono bg-gray-100 dark:bg-gray-700 px-1 py-0.5 rounded text-xs text-green-700 dark:text-green-300; } /* Gray BG, green text */
.execution-output-content pre { @apply font-mono bg-gray-100 dark:bg-gray-700 p-2 rounded my-1 overflow-x-auto text-xs shadow-inner; }
.execution-output-content pre > code { @apply p-0 bg-transparent text-inherit; }
.execution-output-content blockquote { @apply border-l-4 border-gray-300 dark:border-gray-600 pl-2 italic my-1 text-gray-600 dark:text-gray-400 text-sm; }
.execution-output-content table { @apply w-auto max-w-full border-collapse border border-gray-300 dark:border-gray-600 my-2 text-xs; }
.execution-output-content th,
.execution-output-content td { @apply border border-gray-300 dark:border-gray-600 p-1 text-left; }
.execution-output-content th { @apply bg-gray-100 dark:bg-gray-700 font-semibold; }
.execution-output-content img { @apply max-w-full h-auto my-1 rounded border border-gray-200 dark:border-gray-700; }
.execution-output-content svg { @apply max-w-full h-auto my-1; }
.execution-output-content hr { @apply border-t border-gray-300 dark:border-gray-600 my-2; }

/* Highlight.js theme override for Execution Output (Inline code, NOT pre blocks) */
/* Keep existing HLJS themes (GitHub Light / Tokyo Night Dark) or replace if a better Borg/Cyberpunk theme is found */
.execution-output-content.hljs { background: none !important; padding: 0 !important; margin: 0 !important; color: inherit !important;}
/* Light Mode HLJS (GitHub Light) */
html:not(.dark) .execution-output-content .hljs {color:#24292e}html:not(.dark) .execution-output-content .hljs-meta{color:#6a737d}html:not(.dark) .execution-output-content .hljs-comment{color:#6a737d;font-style:italic}html:not(.dark) .execution-output-content .hljs-tag{color:#22863a}html:not(.dark) .execution-output-content .hljs-tag .hljs-name,html:not(.dark) .execution-output-content .hljs-tag .hljs-attr{color:#22863a}html:not(.dark) .execution-output-content .hljs-keyword,html:not(.dark) .execution-output-content .hljs-selector-tag,html:not(.dark) .execution-output-content .hljs-literal,html:not(.dark) .execution-output-content .hljs-name{color:#d73a49}html:not(.dark) .execution-output-content .hljs-deletion,html:not(.dark) .execution-output-content .hljs-number,html:not(.dark) .execution-output-content .hljs-attribute,html:not(.dark) .execution-output-content .hljs-variable,html:not(.dark) .execution-output-content .hljs-template-variable,html:not(.dark) .execution-output-content .hljs-symbol{color:#005cc5}html:not(.dark) .execution-output-content .hljs-section,html:not(.dark) .execution-output-content .hljs-title,html:not(.dark) .execution-output-content .hljs-type{color:#6f42c1}html:not(.dark) .execution-output-content .hljs-string,html:not(.dark) .execution-output-content .hljs-subst,html:not(.dark) .execution-output-content .hljs-regexp,html:not(.dark) .execution-output-content .hljs-link,html:not(.dark) .execution-output-content .hljs-addition,html:not(.dark) .execution-output-content .hljs-selector-id,html:not(.dark) .execution-output-content .hljs-selector-class{color:#032f62}html:not(.dark) .execution-output-content .hljs-built_in,html:not(.dark) .execution-output-content .hljs-bullet,html:not(.dark) .execution-output-content .hljs-code,html:not(.dark) .execution-output-content .hljs-formula{color:#e36209}html:not(.dark) .execution-output-content .hljs-emphasis{font-style:italic}html:not(.dark) .execution-output-content .hljs-strong{font-weight:bold}
/* Dark Mode HLJS (Tokyo Night Dark) */
.dark .execution-output-content .hljs{color:#a9b1d6}.dark .execution-output-content .hljs-meta{color:#ff9e64}.dark .execution-output-content .hljs-comment{color:#565f89;font-style:italic}.dark .execution-output-content .hljs-tag{color:#f7768e}.dark .execution-output-content .hljs-tag .hljs-name,.dark .execution-output-content .hljs-tag .hljs-attr{color:#f7768e}.dark .execution-output-content .hljs-keyword,.dark .execution-output-content .hljs-selector-tag,.dark .execution-output-content .hljs-literal,.dark .execution-output-content .hljs-name{color:#bb9af7}.dark .execution-output-content .hljs-deletion,.dark .execution-output-content .hljs-number,.dark .execution-output-content .hljs-attribute,.dark .execution-output-content .hljs-variable,.dark .execution-output-content .hljs-template-variable,.dark .execution-output-content .hljs-symbol{color:#ff9e64}.dark .execution-output-content .hljs-section,.dark .execution-output-content .hljs-title,.dark .execution-output-content .hljs-type{color:#7aa2f7}.dark .execution-output-content .hljs-string,.dark .execution-output-content .hljs-subst,.dark .execution-output-content .hljs-regexp,.dark .execution-output-content .hljs-link,.dark .execution-output-content .hljs-addition,.dark .execution-output-content .hljs-selector-id,.dark .execution-output-content .hljs-selector-class{color:#9ece6a}.dark .execution-output-content .hljs-built_in,.dark .execution-output-content .hljs-bullet,.dark .execution-output-content .hljs-code,.dark .execution-output-content .hljs-formula{color:#7dcfff}.dark .execution-output-content .hljs-emphasis{font-style:italic}.dark .execution-output-content .hljs-strong{font-weight:bold}

/* ========================================================================== */
/* 16. Utilities & Animations                                               */
/* ========================================================================== */

/* Display Utilities */
.display-none { @apply hidden; }
.hidden { display: none; }
.dark .dark\:hidden { display: none; }
.dark .dark\:inline { display: inline; }
html:not(.dark) .light\:hidden { display: none; }
html:not(.dark) .light\:inline { display: inline; }


/* Feather Icon Size Utility */
.feather-small { @apply w-3.5 h-3.5 inline-block align-middle; }

/* Keyframes */
@keyframes shimmer { /* For active menu item */
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@keyframes bounce { /* For feather emoji */
  0%, 100% { transform: translateY(-15%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
  50% { transform: translateY(0); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
}
@keyframes matrix-rain { /* For context menu (optional) */
  0% { background-position: 0 0; }
  100% { background-position: 0 1000px; }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes bubble-in-down { /* For thought bubble */
  0% { opacity: 0; transform: translate(-50%, -8px) scale(0.9); }
  100% { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
@keyframes pulse-border { /* For pending spinner */
  0%, 100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.4); } /* Light: --color-primary (Green) */
  50% { box-shadow: 0 0 0 3px rgba(76, 175, 80, 0); }
}
.dark @keyframes pulse-border {
   0%, 100% { box-shadow: 0 0 0 0 rgba(0, 230, 118, 0.5); } /* Dark: --color-accent-sky-light (Bright Green) */
   50% { box-shadow: 0 0 0 3px rgba(0, 230, 118, 0); }
}
@keyframes step-slide-in { /* For step items */
    from { opacity: 0; transform: translateX(-15px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes fall { /* For optional falling object animation */
  from { transform: translateY(-30px) rotate(0deg); opacity: 1; }
  to { transform: translateY(calc(100vh + 30px)) rotate(360deg); opacity: 0.5; }
}

/* Animation Utility Classes */
.animate-bounce { animation: bounce 1.5s infinite ease-in-out; }
.animate-spin { animation: spin 1s linear infinite; }
.animate-pulse-border { animation: pulse-border 1.5s infinite cubic-bezier(0.66, 0, 0, 1); }
.animate-step-slide-in { animation: step-slide-in 0.4s ease-out forwards; }
.animate-fall { animation: fall linear infinite; }

/* Transition Utilities (Vue <transition>) */
@layer utilities {
  /* Generic Fade */
  .fade-enter-active, .fade-leave-active { @apply transition-opacity duration-300 ease-out; }
  .fade-enter-from, .fade-leave-to { @apply opacity-0; }

  /* Icon Fade & Scale (for Step icons) */
  .fade-icon-enter-active, .fade-icon-leave-active {
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
  }
  .fade-icon-enter-from, .fade-icon-leave-to { opacity: 0; transform: scale(0.7); }
  .fade-icon-enter-to, .fade-icon-leave-from { opacity: 1; transform: scale(1); }

  /* Thought Bubble Animation */
  .animate-bubble-in-down {
    animation-name: bubble-in-down;
    animation-duration: 0.25s;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  /* Slide Transitions */
  .slide-right-enter-active, .slide-right-leave-active { transition: transform 0.3s ease-out; }
  .slide-right-enter-from, .slide-right-leave-to { transform: translateX(-100%); }

  .slide-left-enter-active, .slide-left-leave-active { transition: transform 0.3s ease-out; }
  .slide-left-enter-from, .slide-left-leave-to { transform: translateX(100%); }

  /* List Transitions (e.g., Discussions) */
  .discussionsList-move,
  .discussionsList-enter-active,
  .discussionsList-leave-active { transition: all 0.35s ease; }
  .discussionsList-enter-from { opacity: 0; transform: translateX(-25px); }
  .discussionsList-leave-to { opacity: 0; transform: translateX(25px); }
  .discussionsList-leave-active { position: absolute; width: calc(100% - 1rem); /* Needs adjustment based on parent padding */ }

  .list-move,
  .list-enter-active,
  .list-leave-active { transition: all 0.4s ease; } /* Generic list transition */
  .list-enter-from { opacity: 0; transform: translateY(-20px); }
  .list-leave-to { opacity: 0; transform: translateY(20px); }
  .list-leave-active { position: absolute; width: calc(100% - 1rem); /* Adjust width */ }

   /* Fade and Fly Up */
  .fade-and-fly-enter-active, .fade-and-fly-leave-active {
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  .fade-and-fly-enter-from, .fade-and-fly-leave-to {
    opacity: 0;
    transform: translateY(10px);
  }
}

/* Animated Thought Bubble Component (Tooltip) */
@layer components {
  .animated-thought-bubble {
    @apply absolute bottom-[calc(100%+6px)] left-1/2
           opacity-0 invisible group-hover/item:opacity-100 group-hover/item:visible group-hover/item:pointer-events-auto
           bg-gray-700 dark:bg-gray-200 /* Gray colors */
           text-white dark:text-gray-800
           rounded-md shadow-lg px-2.5 py-1.5 text-xs z-50 font-mono /* Tech font */
           w-max max-w-[180px]
           transform -translate-x-1/2
           origin-bottom
           transition-opacity duration-150
           group-hover/item:animate-bubble-in-down;
  }

  .animated-thought-bubble::after { /* Arrow */
    content: '';
    @apply absolute top-full left-1/2 transform -translate-x-1/2
           border-[6px] border-solid border-transparent
           border-t-gray-700 dark:border-t-gray-200; /* Gray arrow */
  }
}

/* Line Clamp Utility */
.line-clamp-4 {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ========================================================================== */
/* End of Theme                                                             */
/* ========================================================================== */